<template>
    <el-dialog
        title="重置密码"
        :visible="show"
        :before-close="handleCancel"
        :close-on-click-modal="false"
        width="500px"
    >
        <div>
            <el-form :model="formData" :rules="rules" ref="form" v-if="reset">
                <el-form-item label="账号：" label-width="120px">
                    <span>{{user.name}}</span>
                </el-form-item>
                <el-form-item label="重置密码：" prop="password" label-width="120px">
                    <el-input
                        v-model="formData.password"
                        type="password"
                        auto-complete="off"
                        placeholder="请输入要重置的密码"
                    ></el-input>
                </el-form-item>
                <el-form-item label="确认密码：" prop="password2" label-width="120px">
                    <el-input
                        v-model="formData.password2"
                        type="password"
                        auto-complete="off"
                        placeholder="请再输入一次重置密码"
                    ></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel" size="small">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="small" :loading="loadingSubmit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import user_api from '../../api/user_api'
import sha256 from 'js-sha256'

export default {
    created() {
    },
    props: {
        show: Boolean,
        success: Function,
        cancel: Function,
        user: Object,
    },
    watch: {
        show(val) {
            if (val) {
                this.reset = false
                this.$nextTick(() => {
                    Object.assign(this.$data, this.$options.data.call(this))
                    this.reset = true
                    this.init&&this.init()
                })
            }
        }
    },
    data() {
        return {
            formData: {
            },
            loadingSubmit: false,
            rules: {
                password: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { message: '密码长度至少6位', min: 6, trigger: 'blur' }
                ],
                password2: [
                    { required: true, message: '请再次输入新密码', trigger: 'blur' },
                    { message: '密码长度至少6位', min: 6, trigger: 'blur' },
                    {
                        required: true,
                        validator: (rule, value, callback) => value === this.formData.password ? callback() : callback(new Error('两次输入密码不一致!')),
                        trigger: 'blur'
                    }
                ],
            },
            reset: true
        }
    },
    methods: {
        handleSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loadingSubmit = true
                    const password = sha256.sha256(this.formData.password)
                    user_api.resetPassword(this.user.id, password).then(data => {
                        this.loadingSubmit = false
                        this.$message({
                            type: 'success',
                            message: '重置密码成功!'
                        })
                        this.success()
                    }).catch(err => {
                        this.loadingSubmit = false
                        this.$message.error(err.message)
                    })
                }
            })
        },
        handleCancel() {
            this.cancel()
        }
    }
}
</script>

<style scoped>
</style>